<template>
	<view class="groupauditinfo">
		<view class="groupmanage_input_box box_bg">
			<view class="label">姓名</view>
			<view class="ml-10">{{form.name}}</view>
		</view>
		<view class="groupmanage_input_box box_bg">
			<view class="label">电话</view>
			<view class="ml-10">{{form.mobile}}</view>
		</view>
		
		<view class="travel_box box_bg">
			<view class="display_flex mb-10 f-13">
				<view class="c-999999">车系</view>
				<view class="ml-10">{{form.car_series_one}}</view>
			</view>
			<view class="label">行驶证</view>
			<view class="travel_img_box">
				<view class="pop_carimg_cell">
					<image v-if="form.car_license_one" @click="previewImage(1)" style="height: 340rpx;width: 100%;border-radius: 8rpx;"
						:src="picUrl+form.car_license_one" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="travel_box box_bg" v-if="form.car_series_two">
			<view class="display_flex mb-10 f-13">
				<view class="c-999999">车系</view>
				<view class="ml-10">{{form.car_series_two}}</view>
			</view>
			<view class="mb-10 f-13 c-999999">行驶证</view>
			<view class="travel_img_box">
				<view class="pop_carimg_cell">
					<image @click="previewImage(2)" style="height: 340rpx;width: 100%;border-radius: 8rpx;"
						:src="picUrl+form.car_license_two" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="travel_box box_bg" v-if="form.car_series_three">
			<view class="display_flex mb-10 f-13">
				<view class="c-999999">车系</view>
				<view class="ml-10">{{form.car_series_three}}</view>
			</view>
			<view class="label">行驶证</view>
			<view class="travel_img_box">
				<view class="pop_carimg_cell">
					<image @click="previewImage(3)" style="height: 340rpx;width: 100%;border-radius: 8rpx;"
						:src="picUrl+form.car_license_three" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="groupmanage_input_box">
			<view class="mr-5">
				当前状态 |
				<text class="text green" v-if="form.status == 1">审核通过</text>
				<text class="text red" v-else-if="form.status == 0">待审核</text>
				<text class="text black" v-else>{{ form.exit_status == 1 ? '已退出' : '审核未通过' }}</text>
			</view>
		</view>
		<view class="check_input_box">
			<view class="display_flex mt-10" @click="changeAudit(1)">
				<uni-icons v-if="form.status==1" type="circle-filled" size="18" color="#191919"></uni-icons>
				<uni-icons v-else type="circle" size="18"></uni-icons>
				<view>通过</view>
			</view>
			<view class="display_flex mt-10" @click="changeAudit(2)">
				<uni-icons v-if="form.status==2" type="circle-filled" size="18" color="#191919"></uni-icons>
				<uni-icons v-else type="circle" size="18"></uni-icons>
				<view>未通过</view>
			</view>
		</view>
		<view class="groupmanage_textarea" v-if="form.status==2">
			<textarea style="height: 140rpx;" v-model="form.refuse_reason" placeholder="未审核通过原因(限500字)" maxlength="500"
				:disable-default-padding="true"></textarea>
		</view>
		<view class="next_step_btn" @click="submitForm">提交审核</view>
	</view>
</template>

<script>
	import {
		getGroupAuditInfo,
		submitGroupAudit
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				form: {
					license: [],
					status: '',
					refuse_reason: '',
				},
				isSubmit: true,
				picUrl: app.globalData.picUrl
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('userinfo').is_staff == 0) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('userinfo').is_staff != 0) {
				this.club_id = options.club_id
				this.id = options.id
				this.getGroupAuditInfo()
			}
		},
		methods: {
			getGroupAuditInfo() {
				getGroupAuditInfo({
					id: this.id
				}).then(res => {
					if (res.state == 1) {
						this.form = res.data.info
						this.form.license = res.data.info.license
						this.form.status = res.data.info.status
						this.form.refuse_reason = res.data.info.refuse_reason
						var params = {
							event_code: '入会审核管理详情',
							path: 'pages/groupmanage/groupauditinfo',
							event_id: this.id,
							title: res.data.info.name,
							source_page: '',
							value: '',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeAudit(type) {
				this.form.status = type
				if (type != 2) {
					this.form.refuse_reason = ''
				}
			},
			submitForm() {
				var that = this
				if (that.isSubmit) {
					that.isSubmit = false
					if (that.form.status == '') {
						uni.showToast({
							title: '请选择审核状态',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					if (that.form.status == 2) {
						if (that.form.refuse_reason == '') {
							uni.showToast({
								title: '请选择未审核通过原因',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							that.isSubmit = true
							return false;
						}
					}

					uni.showModal({
						content: '确定提交审核吗？',
						confirmColor: '#00A0DC',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								submitGroupAudit({
									id: that.id,
									status: that.form.status,
									refuse_reason: that.form.refuse_reason
								}).then(res => {
									if (res.state == 1) {
										uni.showToast({
											title: '操作成功',
											mask: true,
											icon: 'success',
											duration: 1500
										})
										setTimeout(function() {
											that.isSubmit = true
											uni.setStorage({
												key: 'onload',
												data: 'true',
												success() {
													uni.navigateBack({
														delta: 1
													})
													that.form.status = ''
													that.form.refuse_reason = ''
												}
											})
										}, 1000)
									} else {
										that.isSubmit = true
										uni.showToast({
											title: res.error[0],
											mask: true,
											icon: 'none',
											duration: 1500
										})
									}
								})
								var params = {
									event_code: '入会审核管理详情',
									path: 'pages/groupmanage/groupauditinfo',
									event_id: that.form.id,
									title: that.form.name,
									source_page: '提交审核',
									value: '',
								}
								app.BurialPoint(params)
							} else if (res.cancel) {
								console.log('用户点击取消');
								that.isSubmit = true
							}
						}
					});
				}
			},
			previewImage(type) {
				if(type==1){
					var car_license_img=this.form.car_license_one
				}else if(type==2){
					var car_license_img=this.form.car_license_two
				}else if(type==3){
					var car_license_img=this.form.car_series_three
				}
				uni.previewImage({
					urls: [this.picUrl + car_license_img]
				});
			},
		}
	}
</script>

<style lang="scss">
	.groupauditinfo {
		padding: 30rpx;

		.groupmanage_input_box {
			height: 88rpx;
			font-size: 26rpx;
			margin-top: 40rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			border-radius: 4px;

			.text {
				padding-left: 10rpx;
			}

			.green {
				color: #07C061;
			}

			.red {
				color: #EE2A2A;
			}

			.black {
				color: #666666;
			}
		}

		.check_input_box {
			font-size: 26rpx;
			padding: 0 30rpx;
		}

		.box_bg {
			background-color: #F7F7F7;
			border: 2rpx solid #F7F7F7;

			.label {
				color: #999;
				font-size: 26rpx;
			}
		}

		.travel_box {
			border-radius: 4px;
			margin-top: 40rpx;
			padding: 30rpx;
		}

		.travel_img_box {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;

			.travel_img {
				width: 80%;
			}
		}

		.groupmanage_textarea {
			font-size: 26rpx;
			height: 140rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			border: 2rpx solid #F2F2F2;
		}

		.next_step_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			padding: 25rpx 0;
			margin: 60rpx 0;
			border-radius: 8rpx;
			background-color: #00A0DC;
		}
	}
</style>